<template>
    <div>
        <el-table
            :data="list" style="width: 100%">
            <el-table-column prop="description" label="描述"  align="center"> </el-table-column>
            <el-table-column prop="propName" label="名称"  align="center"> </el-table-column>
            <el-table-column prop="value" label="值"  align="center">
                <template slot-scope="{row}">
                    <template v-if="row.propName=='handleValType'">
                        {{row.value}}
                    </template>
                    <template v-else>
                        {{row.value}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <template v-if="row.propName=='handleDictType'">
                        <template v-if="!isInvalid(row.value)">
                            <el-button type="text" @click="showDictDataDialog(row.value)">
                                查看字典信息
                            </el-button>
                        </template>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer
            title="字典信息"
            :visible.sync="dictDataDialogInfo.showDialog"
            :direction="dictDataDialogInfo.direction"
            append-to-body
            size="70%"
            >
            <el-button type="primary" @click="jumpToDictByDictType(false)">
                跳转到字典页面
            </el-button>
            <el-button type="primary" @click="jumpToDictByDictType(true)">
                新窗口打开字典页面
            </el-button>
        </el-drawer>
    </div>
</template>

<script>
import {formatWebListPropConfigDescription, isNullOrUndefined} from "../../core";

export default {
    name: 'SksTablePropTable',
    components: {},
    props:{
        item:{
            type:Object,
            default(){
                return {
                }
            }
        }
    },
    data(){
        return {
            list:[],

            dictDataDialogInfo: {
                showDialog: false,
                //从左往右开
                direction: 'ltr',

                extra: {
                    dictId: undefined,
                    dictTypeObject: {}
                },
            },
        }
    },
    watch:{
        item:{
            handler(val){
                console.log("item",this.item)
                this.list=this.convertItemToList()
            },
            immediate: true,
            deep: true,
        }
    },
    methods:{
        convertItemToList(item=this.item){
            let tmp=[]
            if(isNullOrUndefined(item)){
                return tmp
            }
            for (let itemProp of Object.keys(item)) {
                tmp.push({
                    propName: itemProp,
                    value: item[itemProp],
                    description: this.formatWebListPropConfigDescription(itemProp),
                })
            }
            return tmp;
        },
        showDictDataDialog(dictType){
            this.$emit('showDictDataDialog',{
                dictType: dictType,
            })
        },
        jumpToDictByDictType(newTab=false){
            this.$emit('jumpToDictData',{
                dictId: this.dictDataDialogInfo.extra.dictId,
                newTab: newTab,
            })
        },

        formatWebListPropConfigDescription(name){
            switch (name){
                case 'sksAppId':
                    return '配置主键'
                default:
                    break
            }
            return formatWebListPropConfigDescription(name)
        }
    }
}
</script>

<style scoped>

</style>
